<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/0.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=LatoNoto Serif SC:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"zjingw.github.io","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"left","width":300,"display":"post","padding":18,"offset":12,"onmobile":true},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":true,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":true,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="前端知识点总结——JS基础好记性不如烂笔头！">
<meta property="og:type" content="article">
<meta property="og:title" content="前端知识点总结-JS基础">
<meta property="og:url" content="https://zjingw.github.io/2020/09/26/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-JS%E5%9F%BA%E7%A1%80/index.html">
<meta property="og:site_name" content="曾敬威的博客">
<meta property="og:description" content="前端知识点总结——JS基础好记性不如烂笔头！">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-09-26T08:18:31.000Z">
<meta property="article:modified_time" content="2020-09-26T08:22:20.703Z">
<meta property="article:author" content="ZJW">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://zjingw.github.io/2020/09/26/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-JS%E5%9F%BA%E7%A1%80/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>前端知识点总结-JS基础 | 曾敬威的博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="曾敬威的博客" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>
    <a target="_blank" rel="noopener" href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">曾敬威的博客</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">我的折腾笔记</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="home  //首页 fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="user  //关于 fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="tags  //标签 fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="th   //分类 fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="archive //归档 fa-fw"></i>归档</a>

  </li>
        <li class="menu-item menu-item-schedule">

    <a href="/schedule/" rel="section"><i class="calendar   //日程表 fa-fw"></i>日程表</a>

  </li>
        <li class="menu-item menu-item-sitemap">

    <a href="/sitemap.xml" rel="section"><i class="sitemap   //站点地图 fa-fw"></i>站点地图</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

  <a href="https://github.com/ZJingW" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://zjingw.github.io/2020/09/26/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-JS%E5%9F%BA%E7%A1%80/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/1.jpeg">
      <meta itemprop="name" content="ZJW">
      <meta itemprop="description" content="Ctrl C/Ctrl V拯救世界">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="曾敬威的博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          前端知识点总结-JS基础
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2020-09-26 16:18:31 / 修改时间：16:22:20" itemprop="dateCreated datePublished" datetime="2020-09-26T16:18:31+08:00">2020-09-26</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>14k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>12 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h2 id="前端知识点总结——JS基础"><a href="#前端知识点总结——JS基础" class="headerlink" title="前端知识点总结——JS基础"></a><strong>前端知识点总结——JS基础</strong></h2><p>好记性不如烂笔头！</p>
<a id="more"></a>
<h3 id="1-javascript概述-了解"><a href="#1-javascript概述-了解" class="headerlink" title="1.javascript概述(了解)"></a>1.javascript概述(了解)</h3><p>1.什么是javascript</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">javascript简称为js，是一种运行于js解释器&#x2F;引擎中的脚本语言</span><br><span class="line">js的运行环境：</span><br><span class="line">1.独立安装的js解释器（node）</span><br><span class="line">2.嵌入在浏览器内核中的js解释器</span><br></pre></td></tr></table></figure>

<p>2.js的发展史</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">1.1992年Nombas公司为自己开发了一款脚本语言SciptEase</span><br><span class="line">2.1995年Netscape(网景)开发了一款脚本语言LiveScrpt,后来更名javascript</span><br><span class="line">3.1996年Microsoft在IE3.0版本中克隆javascript，JScript</span><br><span class="line">4.1997年，javascript提交给ECMA(欧洲计算机制造商联合会)。定义ECMAScript,简称ES5，ES6</span><br></pre></td></tr></table></figure>

<p>3.js组成部分</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1.核心（ECMAScript）</span><br><span class="line">2.DOM (Document object model)文档对象模型</span><br><span class="line">3.BOM (Browser object model)浏览器对象模型</span><br></pre></td></tr></table></figure>

<p>4.js的特点</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">1.语法类似于c,java</span><br><span class="line">2.无需编译，由js解释器直接运行</span><br><span class="line">3.弱类型语言</span><br><span class="line">4.面向对象的</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="2-JavaScript的基础语法"><a href="#2-JavaScript的基础语法" class="headerlink" title="2.JavaScript的基础语法"></a>2.JavaScript的基础语法</h3><p>1.使用javascript</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">1.搭建运行环境</span><br><span class="line">  1.独立安装的JS解释器-NodeJS</span><br><span class="line">    1.在命令行界面：输入node</span><br><span class="line">  console.log(&quot;你好，世界&quot;);</span><br><span class="line">  在控制台打印输出</span><br><span class="line">  说明：js是可以独立在js解释器中运行</span><br><span class="line">2.使用浏览器内核中嵌的js解释器</span><br><span class="line">  浏览器内核负责页面内容的渲染，由两部分组成：</span><br><span class="line">     内容排版引擎-解析：HTML&#x2F;CSS</span><br><span class="line">     脚本解释引擎-解析：javascript</span><br><span class="line"> 1.直接在Console（控制台）中输入脚本并运行</span><br><span class="line"> 2.将js脚本嵌入在HTML页面中执行</span><br><span class="line">   1.html元素的事件中执行js脚本</span><br><span class="line">      事件-onclick-鼠标单击时要执行的操作</span><br><span class="line">   2.在&lt;script&gt;中编写脚本并执行</span><br><span class="line">      网页的任何位置处，嵌入一对&lt;script&gt;标记，并且将脚本编写在&lt;script&gt;标记中。</span><br><span class="line">       3.使用外部脚本文件(.js为后缀)</span><br><span class="line">     1.创建脚本文件（.js）并在文件中编写脚本</span><br><span class="line">     2.在使用的网页中引用脚本文件</span><br><span class="line">        &lt;script src&#x3D;&quot;脚本文件的url&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line"> 3.js调试，F12查看错误，出错时不影响其它代码块，后续代码继续执行。</span><br><span class="line">   &lt;script&gt;</span><br><span class="line">    &#x2F;*这个脚本错误*&#x2F;</span><br><span class="line">    document.writ(&quot;&lt;h3&gt;周芷若&lt;&#x2F;h3&gt;&quot;);</span><br><span class="line">       &lt;&#x2F;script&gt;</span><br><span class="line">      &lt;script&gt;</span><br><span class="line">    &#x2F;*继续执行*&#x2F;</span><br><span class="line">        console.log(&quot;金花婆婆&quot;);  </span><br><span class="line">      &lt;&#x2F;script&gt;</span><br><span class="line">    3.通过语法规范</span><br><span class="line">  1.语句：可执行的最小单元</span><br><span class="line">          必须以;结束</span><br><span class="line">      严格区分大小</span><br><span class="line">      所有的符号必须是英文</span><br><span class="line">      2.注释:</span><br><span class="line">    &#x2F;&#x2F; :单行注释</span><br><span class="line">    &#x2F;**&#x2F;:多行注释</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="3-变量和常量"><a href="#3-变量和常量" class="headerlink" title="3.变量和常量"></a>3.变量和常量</h3><p>1.变量声明</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">1.声明变量</span><br><span class="line">  var 变量名;</span><br><span class="line">2.为变量赋值</span><br><span class="line">  变量名&#x3D;值;</span><br><span class="line">3.声明变量是直接赋值</span><br><span class="line">  var 变量名&#x3D;值;</span><br><span class="line">  ex：</span><br><span class="line">  var uname&#x3D;&quot;张无忌&quot;;</span><br><span class="line">  var age&#x3D;20;</span><br><span class="line"> 注意：</span><br><span class="line">   1.允许在一条语句中声明多个变量，用逗号隔开变量名。</span><br><span class="line">     var uname&#x3D;&quot;韩梅梅&quot;,uage&#x3D;20;</span><br><span class="line">   2.如果声明变量，但未赋值，则值默认为undefined</span><br><span class="line">   3.声明变量时可以不适用var,但不推荐</span><br><span class="line">     uname&#x3D;&quot;tom&quot;;</span><br></pre></td></tr></table></figure>

<p>2.变量名的规范</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">1.不允许以数字开头</span><br><span class="line">2.不允许使用关键词和保留关键字</span><br><span class="line">3.最好见名知意</span><br><span class="line">  var uname; var uage;</span><br><span class="line">4.允许包含字母，数字，下划线(_),$</span><br><span class="line">  var $name&#x3D;&quot;Tom&quot;;</span><br><span class="line">5.尽量使用小驼峰命名法</span><br><span class="line">  var userName;</span><br><span class="line">  var uname;</span><br><span class="line">  var _uname;&#x2F;&#x2F;下划线</span><br><span class="line">  var user_name;&#x2F;&#x2F;下划线</span><br><span class="line">  var UserName;&#x2F;&#x2F;大驼峰命名法</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="4-变量的使用"><a href="#4-变量的使用" class="headerlink" title="4.变量的使用"></a>4.变量的使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">1.声明变量未赋值，值默认为undefined</span><br><span class="line">2.使用未声明过的变量 报错</span><br><span class="line">3.赋值操作</span><br><span class="line">  变量名出现在&#x3D;的左边，一律是赋值操作</span><br><span class="line">    var uname&#x3D;&quot;林妹妹&quot;;</span><br><span class="line">4.取值操作</span><br><span class="line">  变量只要没出现在&#x3D;的左边，一律是取值操作</span><br><span class="line">    var uage&#x3D;30;</span><br><span class="line">console.log(uage);</span><br><span class="line">var num1&#x3D;uage;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="5-常量"><a href="#5-常量" class="headerlink" title="5.常量"></a>5.常量</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1.什么是常量</span><br><span class="line">  在程序中，一经声明就不允许被修改的数据就是常量。</span><br><span class="line">2.语法</span><br><span class="line">  const 常量名&#x3D;值;</span><br><span class="line">  常量名在程序中，通常采用大写形式。</span><br><span class="line">  const PI&#x3D;3.1415926;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="5-1数据类型"><a href="#5-1数据类型" class="headerlink" title="5.1数据类型"></a>5.1数据类型</h3><p>1.数据类型的作用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">规定了数据在内存中所占的空间</span><br><span class="line">10.1 64位 8个字节</span><br><span class="line">bit:位</span><br><span class="line">8bit&#x3D;1byte字节</span><br><span class="line">1024byte&#x3D;1KB </span><br><span class="line">1024KB&#x3D;1MB</span><br><span class="line">1024MB&#x3D;1G </span><br><span class="line">1024G&#x3D;1T</span><br></pre></td></tr></table></figure>

<p>2.数据类型详解</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line">1.数据类型分两大类</span><br><span class="line">  原始类型（基本类型）</span><br><span class="line">  引用类型</span><br><span class="line">  1.原始类型</span><br><span class="line">    1.Number 类型</span><br><span class="line">  数字类型</span><br><span class="line">  作用：可以表示32位的整数，也可以表示64位的浮点数（小数）</span><br><span class="line">  整数：</span><br><span class="line">     1.十进制</span><br><span class="line">       10 </span><br><span class="line">     2.八进制</span><br><span class="line">       由0-7八个数字组成，逢八进一</span><br><span class="line">       八进制中以0开始</span><br><span class="line">       var num&#x3D;010;</span><br><span class="line">     3.十六进制</span><br><span class="line">       由0-9和A-f组成，逢十六进一</span><br><span class="line">          A:10</span><br><span class="line">      B:11</span><br><span class="line">      C:12</span><br><span class="line">      D:13</span><br><span class="line">      E:14</span><br><span class="line">      F:15</span><br><span class="line">       十六进制中以0X开始</span><br><span class="line">      浮点数：又称小数</span><br><span class="line">    小数点计数法：12.58  </span><br><span class="line">    指数计数法：3.4e3（3.4*10的3次方）</span><br><span class="line">2.String类型</span><br><span class="line">  字符串类型</span><br><span class="line">  作用：表示一系列的文本字符数据，如：姓名，性别，住址...</span><br><span class="line">  字符串中的每个字符，都是由Unicode码的字符，标点和数字组成。</span><br><span class="line">  Unicode码:每个字符在计算机中都有一个唯一的编码表示该字符，</span><br><span class="line">  该码就是unicode码（他是十六进制）</span><br><span class="line">     1.查找一个字符的unicode码：</span><br><span class="line">     &quot;李&quot;.charCodeAt();</span><br><span class="line">     &#x2F;&#x2F;10进制输出</span><br><span class="line"></span><br><span class="line">     &quot;李&quot;.charCodeAt().toString(2);</span><br><span class="line">     &#x2F;&#x2F;二进制输出</span><br><span class="line"></span><br><span class="line">     &quot;李&quot;.charCodeAt().toString(16);</span><br><span class="line">     &#x2F;&#x2F;十六进制</span><br><span class="line"></span><br><span class="line">       李的unicode码是：674e</span><br><span class="line">     2.如何将674e转换为汉字？</span><br><span class="line">        用\u</span><br><span class="line">       ex:</span><br><span class="line">        var str&#x3D;&quot;\u674e&quot;;</span><br><span class="line">    console.log(str);&#x2F;&#x2F;结果是“李”</span><br><span class="line"></span><br><span class="line">    汉字的Unicode码的范围：</span><br><span class="line">    \u4e00~\u9fa5</span><br><span class="line">     3.特殊字符需要转义字符</span><br><span class="line">       \n: 换行</span><br><span class="line">       \t: 制表符（缩进）</span><br><span class="line">       \&quot;: &quot;</span><br><span class="line">       \&#39;: &#39;</span><br><span class="line">       \\: \</span><br><span class="line">3.Boolean类型</span><br><span class="line">  布尔类型</span><br><span class="line">  作用：在程序中表示真或假的结果</span><br><span class="line">  取值：</span><br><span class="line">     true或false</span><br><span class="line">  var isBig&#x3D;true;</span><br><span class="line">  var isRun&#x3D;false;</span><br><span class="line">  在参与到数学运算时，true可以当成1做运算，false可以当做0做运算。</span><br><span class="line">  var res&#x3D;25+true; &#x2F;&#x2F;结果为26</span><br><span class="line">    4.Undefined类型</span><br><span class="line">  作用：表示使用的数据不存在</span><br><span class="line">  Undefined类型只有一个值,即undefined当声明的变量未赋值（未初始化）时，</span><br><span class="line">  该变量的默认值就是undefined.</span><br><span class="line">5.Null类型</span><br><span class="line">  null用于表示不存在的对象。</span><br><span class="line">      Null类型只有一个值，即null,如果函数或方法要返回的是对象，</span><br><span class="line">      找不到该对象，返回的就是null。</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="5-2数据类型的转换"><a href="#5-2数据类型的转换" class="headerlink" title="5.2数据类型的转换"></a>5.2数据类型的转换</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">1.隐式（自动）转换</span><br><span class="line">  不同类型的数据在计算过程中自动进行转换</span><br><span class="line">  1.数字+字符串：数字转换为字符串</span><br><span class="line">    var num&#x3D;15;</span><br><span class="line">var str&#x3D;&quot;Hello&quot;;</span><br><span class="line">var res&#x3D;num+str; &#x2F;&#x2F;结果：15Hello</span><br><span class="line">  2.数字+布尔：将布尔转换为数字true&#x3D;1,false&#x3D;0</span><br><span class="line">    var num1&#x3D;10;</span><br><span class="line">var isSun&#x3D;true;</span><br><span class="line">var res1&#x3D;num1+isSun;&#x2F;&#x2F;结果：11</span><br><span class="line">  3.字符串+布尔：将布尔转换为字符串</span><br><span class="line">    var str1&#x3D;&quot;Hello&quot;;</span><br><span class="line">var isSun1&#x3D;true;</span><br><span class="line">var res2&#x3D;str1+isSun1;&#x2F;&#x2F;结果：Hellotrue</span><br><span class="line">  4.布尔+布尔：将布尔转换为数字</span><br><span class="line">    true&#x3D;1,false&#x3D;0;</span><br><span class="line">    var isSun2&#x3D;true;</span><br><span class="line">var isSun3&#x3D;flase;</span><br><span class="line">var res&#x3D;isSun2+isSun3;&#x2F;&#x2F;结果1</span><br><span class="line">2.强制转换 -转换函数</span><br><span class="line">  1.toString()</span><br><span class="line">    将任意类型的数据转换为字符串</span><br><span class="line">语法：</span><br><span class="line">  var num&#x3D;变量.toString();</span><br><span class="line">  ex:</span><br><span class="line">  var num&#x3D;15;</span><br><span class="line">  var str&#x3D;num.toString();</span><br><span class="line">  console.log(typeof(str));</span><br><span class="line">  2.parseInt()</span><br><span class="line">    将任意类型的数据转换为整数</span><br><span class="line">如果转换不成功，结果为NaN(Not a Number)</span><br><span class="line">语法：var result&#x3D;parseInt(数据);</span><br><span class="line">  3.parseFloat()</span><br><span class="line">    将任意类型的数据转换为小数</span><br><span class="line">如果转换不成功，结果为NaN</span><br><span class="line">语法：var result&#x3D;parseFloat(数据);</span><br><span class="line">  4.Number()</span><br><span class="line">    将任意类型数据转为Number类型</span><br><span class="line">注意：如果包含非法字符，则返回NaN</span><br><span class="line">语法：var result&#x3D;Number(数据);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="6-运行符和表达式"><a href="#6-运行符和表达式" class="headerlink" title="6.运行符和表达式"></a>6.运行符和表达式</h3><p>1.什么是表达式</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">由运算符连接操作数所组成的式子就是表达式。</span><br><span class="line">ex：</span><br><span class="line">  15+20</span><br><span class="line">  var x&#x3D;y&#x3D;40</span><br><span class="line">任何一个表达式都会有结果。</span><br></pre></td></tr></table></figure>

<p>2.运算符</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br></pre></td><td class="code"><pre><span class="line">1.算术运算符</span><br><span class="line">  +，-，*，&#x2F;，%，++，--</span><br><span class="line"></span><br><span class="line">  5%2&#x3D;1;</span><br><span class="line">  ++:自增运算，只做+1操作</span><br><span class="line">  ++在前：先自增，再运算；</span><br><span class="line">  ++在后：先运算，再自增；</span><br><span class="line">  ex:</span><br><span class="line">    var num&#x3D;5;</span><br><span class="line">console.log(num++);&#x2F;&#x2F;打印5，变为6</span><br><span class="line">console.log(++num);&#x2F;&#x2F;变为7，打印7</span><br><span class="line"></span><br><span class="line">ex:</span><br><span class="line">    var num&#x3D;5;</span><br><span class="line">             5   (6)6   6(7)    (8)8</span><br><span class="line">    var res&#x3D;num+ ++num +num++ + ++num +num++ +num;  </span><br><span class="line">  8(9)   9</span><br><span class="line">结果：42</span><br><span class="line">2.关系运算符（比较）</span><br><span class="line">  &gt;,&lt;,&gt;&#x3D;,&lt;&#x3D;,&#x3D;&#x3D;,&#x3D;&#x3D;&#x3D;(全等),!&#x3D;,!&#x3D;&#x3D;(不全等)</span><br><span class="line">  关系运算的结果：boolean类型（true,false）</span><br><span class="line">  问题：</span><br><span class="line">    1. 5 &gt; &quot;10&quot; 结果：false</span><br><span class="line">   关系运算符两端，只要有一个是number的话，另外一个会隐式转换为number类型，再进行比较。</span><br><span class="line">2.&quot;5&quot;&gt;&quot;1 0&quot; 结果：true</span><br><span class="line">  &quot;5&quot;.charCodeAt(); &#x2F;&#x2F;53</span><br><span class="line">  &quot;1&quot;.charCodeAt(); &#x2F;&#x2F;49</span><br><span class="line">  &quot;张三丰&quot; &gt; &quot;张无忌&quot; 结果：false</span><br><span class="line">    19977  &gt;   26080</span><br><span class="line">3.&quot;3a&quot; &gt; 10 结果：false</span><br><span class="line">  Number(&quot;3a&quot;)---&gt;NaN</span><br><span class="line">  注意：</span><br><span class="line">    NaN与任何一个数据做比较运算时，结果都是false.</span><br><span class="line">    console.log(&quot;3a&quot;&gt;10); false</span><br><span class="line">    console.log(&quot;3a&quot;&#x3D;&#x3D;10); false</span><br><span class="line">    console.log(&quot;3a&quot;&lt;10); false</span><br><span class="line">    isNaN()函数：</span><br><span class="line">       语法：isNaN(数据);</span><br><span class="line">       作用：判断指定数据是否为非数字，如果不是数字，返回值为true,是数字的话返回的值为false</span><br><span class="line">       console.log(isNaN(&quot;3&quot;)); &#x2F;&#x2F;false</span><br><span class="line">       console.log(isNaN(&quot;3a&quot;)); &#x2F;&#x2F;ture </span><br><span class="line"></span><br><span class="line">       console.log(&quot;3a&quot;!&#x3D;10);&#x2F;&#x2F;true</span><br><span class="line">3.逻辑运算符</span><br><span class="line">  !,&amp;&amp;,||</span><br><span class="line"></span><br><span class="line">  !:取反</span><br><span class="line">  &amp;&amp;：并且，关联的两个条件都为true,整个表达式的结果为true</span><br><span class="line">  ||:或者，关联的两个条件，只要有一个条件为true,整个表达式的结果就为true</span><br><span class="line"></span><br><span class="line">  短路逻辑：</span><br><span class="line">     短路逻辑&amp;&amp;：</span><br><span class="line">     当第一个条件为false时，整体表达式的结果就为false,不需要判断第二个条件</span><br><span class="line">     如果第一个条件为true,会继续判断或执行第二个条件</span><br><span class="line"> 短路逻辑||：</span><br><span class="line">     当第一个条件为true时，就不再执行后续表达式，整体结果为true。</span><br><span class="line">     当第一个条件为false时，继续执行第二个条件或操作。</span><br><span class="line"></span><br><span class="line">4.位运算符</span><br><span class="line">  &lt;&lt;,&gt;&gt;,&amp;,|,^</span><br><span class="line"></span><br><span class="line">  右移是把数变小，左移是把数变大</span><br><span class="line">  &amp;：按位与，判断奇偶性</span><br><span class="line">     任意数字与1做按位与，结果为1，则为奇数，结果为0，则为偶数。</span><br><span class="line">     var num&#x3D;323;</span><br><span class="line"> var result&#x3D;num &amp; 1</span><br><span class="line"> console.log(result); &#x2F;&#x2F;结果为1</span><br><span class="line">  |：按位或，对小数取整</span><br><span class="line">     将任意小数与0做按位或，结果则取整数部分。</span><br><span class="line"></span><br><span class="line">  ^：按位异或，用于交换两个数字</span><br><span class="line">      二进制位数，逐位比较，不同则为1，相同则为0</span><br><span class="line">   a&#x3D;a^b;</span><br><span class="line">   b&#x3D;b^a;</span><br><span class="line">   a&#x3D;a^b;</span><br><span class="line">5.赋值运算符和扩展赋值运算符</span><br><span class="line">  1.赋值运算 &#x3D;</span><br><span class="line">    var uname&#x3D;&quot;TOM&quot;;</span><br><span class="line">  2.扩展赋值运算符</span><br><span class="line">    +&#x3D;,-&#x3D;,*&#x3D;,&#x2F;&#x3D;,%&#x3D;,^&#x3D;...</span><br><span class="line">a&#x3D;a+1 a+&#x3D;1;a++;++a</span><br><span class="line">a&#x3D;a^b</span><br><span class="line">a^&#x3D;b</span><br><span class="line">6.条件（三目）运算符</span><br><span class="line">  单目（一目）运算符，只需要一个操作数或表达式</span><br><span class="line">  ex: a++,b--,!isRun</span><br><span class="line">  双目（二元）运算符，需要两个操作数或表达式</span><br><span class="line">   +，-，*，&#x2F;，%，&gt;,&lt;,&gt;&#x3D;,&lt;&#x3D;,&#x3D;&#x3D;,!&#x3D;,&#x3D;&#x3D;&#x3D;,!&#x3D;&#x3D;,&amp;&amp;,||,&amp;,|,^</span><br><span class="line">  三目（三元）运算符，需要三个操作数或表达式</span><br><span class="line">     条件表达式？表达式1:表达式2;</span><br><span class="line">        先判断条件表达式的值，</span><br><span class="line">    如果条件为true,则执行表达式1的操作</span><br><span class="line">    如果条件为false,则执行表达式2的操作</span><br><span class="line">  ex:成绩大于60及格，否则，输出不及格</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="7-函数-function"><a href="#7-函数-function" class="headerlink" title="7.函数-function"></a>7.函数-function</h3><p>1.什么是函数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">函数，function,也称为方法（method）</span><br><span class="line">函数是一段预定义好，并可以被反复执行的代码块。</span><br><span class="line">   预定义：提前定义好，并非马上执行。</span><br><span class="line">   代码块：可以包含多条可执行的语句</span><br><span class="line">   反复执行：允许被多次调用</span><br><span class="line">函数-功能</span><br><span class="line">   parseInt();</span><br><span class="line">   parseFloat();</span><br><span class="line">   Number();</span><br><span class="line">   console.log();</span><br><span class="line">   alert();</span><br><span class="line">   document.write();</span><br></pre></td></tr></table></figure>

<p>2.定义和使用函数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">1.普通函数的声明和调用（无参数无返回值）</span><br><span class="line">  1.声明</span><br><span class="line">    function 函数名()&#123;</span><br><span class="line">   &#x2F;&#x2F;函数体</span><br><span class="line">     若干可执行的语句</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">  2.调用函数</span><br><span class="line">    在任意javascript合法的位置处通过 函数名(); 对函数进行调用。</span><br><span class="line"></span><br><span class="line">2.带参函数的声明和调用</span><br><span class="line">  1.声明</span><br><span class="line">    function 函数名(参数列表)&#123;</span><br><span class="line">   &#x2F;&#x2F;函数体</span><br><span class="line">&#125;</span><br><span class="line">参数列表：可以声明0或多个参数，多个参数间用逗号隔开</span><br><span class="line">声明函数时，声明的参数，称之为“形参”</span><br><span class="line"> 2.调用</span><br><span class="line">   函数名(参数值列表);</span><br><span class="line">   注意：调用函数时，传递的参数数值，称之为“实参”。</span><br><span class="line">         尽量按照声明函数的格式进行调用</span><br><span class="line">3.带返回值函数声明和调用</span><br><span class="line">  1.声明</span><br><span class="line">    function 函数名(参数)&#123;</span><br><span class="line">   &#x2F;&#x2F;函数体</span><br><span class="line">   return 值;</span><br><span class="line">   &#x2F;&#x2F;return关键字，程序碰到return关键词，就立马跳出并且把值带出去</span><br><span class="line">&#125;</span><br><span class="line">注意：最多只能返回一个值</span><br><span class="line">  2.调用</span><br><span class="line">    允许使用一个变量接收函数的返回值</span><br><span class="line">    var result&#x3D;函数名(实参);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="8-作用域"><a href="#8-作用域" class="headerlink" title="8.作用域"></a>8.作用域</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1.什么是作用域</span><br><span class="line">  作用域表示的是变量或函数的可访问范围。</span><br><span class="line">  JS中的作用域分两种：</span><br><span class="line">     1.函数作用域</span><br><span class="line">   只在函数范围内有效</span><br><span class="line"> 2.全局作用域</span><br><span class="line">   代码的任何位置都有效</span><br></pre></td></tr></table></figure>

<p>2.函数作用域中变量</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">又称为局部变量，只在声明的函数中有效</span><br><span class="line">ex：</span><br><span class="line">  function test()&#123;</span><br><span class="line">    var num&#x3D;10;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>3.全局作用域中的变量</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">又称为全局变量，一经声明，任何位置都能用</span><br><span class="line">1.不在function中声明的变量，为全局变量</span><br><span class="line">2.声明变量不使用var，无论任何位置声明，都是全局变量（不推荐）</span><br><span class="line"></span><br><span class="line">注意：</span><br><span class="line">  全局变量和局部变量冲突时，优先使用局部变量。</span><br><span class="line">3.变量的声明提前</span><br><span class="line">  1.什么是声明提前</span><br><span class="line">    在JS程序正式执行之前，function声明的函数，</span><br><span class="line">    会将所有var声明的变量，都预读（声明）到所在作用域的顶部，但赋值还是保留在原位。</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="9-按值传递"><a href="#9-按值传递" class="headerlink" title="9.按值传递"></a>9.按值传递</h3><p>1.什么是按值传递</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">原始（基本）类型的数据（number,string,bool）,在做参数传递时，</span><br><span class="line">都是按照“值传递”的方式进行传参的。</span><br><span class="line">值传递：真正传递参数时，实际上传递的是值的副本（复制出来一个值），</span><br><span class="line">而不是原始值。</span><br></pre></td></tr></table></figure>

<p>2.函数的作用域</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1.分为两种</span><br><span class="line">  1.局部函数</span><br><span class="line">    在某个function中声明的函数。</span><br><span class="line">  2.全局函数</span><br><span class="line">    在最外层(&lt;script&gt;中)定义的函数就是全局函数，全局函数一经定义，</span><br><span class="line">    任何位置处都能调用。</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="10-ECMAScript提供一组全局函数"><a href="#10-ECMAScript提供一组全局函数" class="headerlink" title="10.ECMAScript提供一组全局函数"></a>10.ECMAScript提供一组全局函数</h3><p>1.parseInt()<br>2.parseFloat()<br>3.isNaN()<br>4.encodeURI()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">URL:uniform resource locator路径</span><br><span class="line">URI:uniform resource Identifier</span><br><span class="line">作用：对统一资源标识符进行编码，并返回编码后的字符串</span><br><span class="line">所谓的进行编码，就是将地址中的多字节文字编成单字节的文字</span><br><span class="line">（英文数字：单字节，汉字2-3字节不等）</span><br></pre></td></tr></table></figure>

<p>5.decodeURI()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">作用：对已经编码的URI进行解码，并返回解码后的字符串。</span><br></pre></td></tr></table></figure>

<p>6.encodeURIComponent()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">在encodeURI的基础上，允许对特殊符号进行编码。</span><br></pre></td></tr></table></figure>

<p>7.decodeURIComponent()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">解码特殊符号</span><br></pre></td></tr></table></figure>

<p>8.eval()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">作用：执行以字符串表示的js代码</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="11-递归调用"><a href="#11-递归调用" class="headerlink" title="11.递归调用"></a>11.递归调用</h3><p>递归：在一个函数的内部再一次调用自己<br>问题：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">1*2*3*4*5</span><br><span class="line"></span><br><span class="line">5*4*3*2*1</span><br><span class="line">求5!(5*4*3*2*1) 4!(4*3*2*1) 3!(3*2*1)</span><br><span class="line">      2!(2*1) 1!(1*1)</span><br><span class="line"></span><br><span class="line">  5!&#x3D;5*4!</span><br><span class="line">  4!&#x3D;4*3!</span><br><span class="line">  3!&#x3D;3*2!</span><br><span class="line">  2!&#x3D;2*1!</span><br><span class="line">  1!&#x3D;1</span><br><span class="line">  通过一个函数，求数字n的阶乘</span><br><span class="line">  10！&#x3D;10*(10-1)！</span><br><span class="line">  效率：</span><br><span class="line">    在本次调用还未结束时，就开始下次的调用，本次调用就会被挂起，</span><br><span class="line">    直到所有的调用都完成之后，才会依次返回，调用的次数越多，效率越低。</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="12-分支结构"><a href="#12-分支结构" class="headerlink" title="12.分支结构"></a>12.分支结构</h3><p>1.if结构</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">if(条件)&#123;</span><br><span class="line">   语句块；</span><br><span class="line">&#125;</span><br><span class="line">注意：</span><br><span class="line">  条件尽量是boolean的，如果不是boolean,以下情况会当做false处理</span><br><span class="line">   if(0)&#123;...&#125;</span><br><span class="line">   if(0.0)&#123;...&#125;</span><br><span class="line">   if(&quot;&quot;)&#123;...&#125;</span><br><span class="line">   if(undefined)&#123;...&#125;</span><br><span class="line">   if(null)&#123;...&#125;</span><br><span class="line">   if(NaN)&#123;...&#125;</span><br><span class="line">注意：if后的&#123;&#125;可以省略，但是不推荐，只控制if后的第一句话。</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>2.if…else…结构</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">语法：</span><br><span class="line">  if(条件)&#123;</span><br><span class="line">     语句块</span><br><span class="line">  &#125;else&#123;</span><br><span class="line">     语句块</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>3.if….else if…else…</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">语法：</span><br><span class="line">  if(条件1)&#123;</span><br><span class="line">    语句块1</span><br><span class="line">  &#125;else if(条件2)&#123;</span><br><span class="line">     语句块2</span><br><span class="line">  &#125;else if(条件3)&#123;</span><br><span class="line">     语句块3</span><br><span class="line">  &#125;else&#123;</span><br><span class="line">     语句块n</span><br><span class="line">  &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>4.switch…case</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">1.作用：（使用场合）</span><br><span class="line">  等值判断</span><br><span class="line">2.语法</span><br><span class="line">  1.switch(值&#x2F;表达式)&#123;</span><br><span class="line">     case 值1：</span><br><span class="line">    语句块1；</span><br><span class="line">    break;&#x2F;&#x2F;结束switch结构，可选的</span><br><span class="line"> case 值2：</span><br><span class="line">    语句块2；</span><br><span class="line">    break;</span><br><span class="line">    ...</span><br><span class="line"> default:</span><br><span class="line">   语句块n；</span><br><span class="line">   break;</span><br><span class="line">   &#125;</span><br><span class="line">  2.特殊用法</span><br><span class="line">    执行相同操作时：</span><br><span class="line">   switch(值&#x2F;表达式)&#123;</span><br><span class="line">       case 值1：</span><br><span class="line">       case 值2：</span><br><span class="line">       case 值3：</span><br><span class="line">          语句块；</span><br><span class="line">   &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="12-循环结构"><a href="#12-循环结构" class="headerlink" title="12.循环结构"></a>12.循环结构</h3><p>1.特点</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1.循环条件：循环的开始和结束</span><br><span class="line">2.循环操作：要执行的相同或相似的语句</span><br></pre></td></tr></table></figure>

<p>2.循环-while</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">语法：</span><br><span class="line">   while(条件)&#123;</span><br><span class="line">      &#x2F;&#x2F;循环体-循环操作</span><br><span class="line"></span><br><span class="line">  &#x2F;&#x2F;更新循环条件</span><br><span class="line">   &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>3.循环的流程控制</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1.break</span><br><span class="line">  作用：终止整个循环的运行</span><br><span class="line">2.continue</span><br><span class="line">  作用：终止本次循环的运行，继续执行下一次循环</span><br><span class="line"> ex:</span><br><span class="line">   循环从弹出框中录入信息，并且打印，直到输入exit为止。</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>4.循环-do…while</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">1.语法</span><br><span class="line">  do&#123;</span><br><span class="line">     &#x2F;&#x2F;循环体</span><br><span class="line">  &#125;while(条件);</span><br><span class="line"></span><br><span class="line"> 执行流程：</span><br><span class="line">     1.先执行循环体</span><br><span class="line"> 2.再判断循环条件</span><br><span class="line">   如果条件为真，则继续执行循环体</span><br><span class="line">   如果条件为假，则跳出循环操作</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>5.循环-for</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">语法：</span><br><span class="line">  for(表达式1;表达式2;表达式3)&#123;</span><br><span class="line">     &#x2F;&#x2F;循环操作</span><br><span class="line">  &#125;</span><br><span class="line">  表达式1：循环条件的声明</span><br><span class="line">  表达式2：循环条件的判断</span><br><span class="line">  表达式3：更新循环变量</span><br><span class="line">  执行流程：</span><br><span class="line">     1.先执行表达式1</span><br><span class="line"> 2.判断表达式2的结果(boolean类型)</span><br><span class="line"> 3.如果2条件为真，则执行循环体，否则退出</span><br><span class="line"> 4.执行完循环体后，再执行表达式3</span><br><span class="line"> 5.判断表达式2的结果</span><br><span class="line">  ex: for(var i&#x3D;1;i&lt;&#x3D;10;i++)&#123;</span><br><span class="line">      console.log(i);</span><br><span class="line">   &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="13-for的特殊用法"><a href="#13-for的特殊用法" class="headerlink" title="13.for的特殊用法"></a>13.for的特殊用法</h3><p>1.for(表达式1;表达式2;表达式3;){}</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">1.省略表达式</span><br><span class="line">  三个表达式可以任意省略，分号不能省</span><br><span class="line">  但一定在循环的内部或外部将表达式补充完整</span><br><span class="line">2.表达式1和表达式3 允许写多个表达式，用逗号隔开表达式</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="14-循环嵌套"><a href="#14-循环嵌套" class="headerlink" title="14.循环嵌套"></a>14.循环嵌套</h3><p>1.循环嵌套</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">在一个循环的内部，又出现一个循环</span><br><span class="line">  for(var i&#x3D;1;i&lt;100;i++)&#123; &#x2F;&#x2F;外层循环</span><br><span class="line">     for(var j&#x3D;1;j&lt;&#x3D;10;j++)&#123;</span><br><span class="line">    &#x2F;&#x2F;内层循环</span><br><span class="line"> &#125;</span><br><span class="line">  &#125;</span><br><span class="line"> 外层循环走一次，内层循环走一轮</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="15-数组"><a href="#15-数组" class="headerlink" title="15.数组"></a>15.数组</h3><p>1.什么是数组</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">在一个变量中保存多个数据。</span><br><span class="line">数组是按照线型顺序来排列的-线型结构</span><br><span class="line">数组中：除了第一个元素外，每个元素都有一个直接的&quot;前驱元素&quot;。</span><br><span class="line">数组中：除了最后一个元素外，每个元素都有一个会直接的&quot;后继元素&quot;。</span><br></pre></td></tr></table></figure>

<p>2.声明数组</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">1.语法</span><br><span class="line">  1.var 数组名&#x3D;[];</span><br><span class="line">    var names&#x3D;[];</span><br><span class="line">  2.var 数组名&#x3D;[元素1,元素2,元素3...];</span><br><span class="line">    var names&#x3D;[&quot;孙悟空&quot;,&quot;猪八戒&quot;,&quot;沙和尚&quot;];</span><br><span class="line">  3.var 数组名&#x3D;new Array();</span><br><span class="line">    var names&#x3D;new Array();</span><br><span class="line">  4.var 数组名&#x3D;new Array(元素1，元素2...);</span><br><span class="line">    var names&#x3D;new Array(&quot;林黛玉&quot;,&quot;贾宝玉&quot;,&quot;王熙凤&quot;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>3.数组的使用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">1.取值和赋值操作</span><br><span class="line">  取值：</span><br><span class="line">   数组名[下标]</span><br><span class="line">   var newArr&#x3D;[&quot;tom&quot;,&quot;lilei&quot;];</span><br><span class="line">   newArr[0]</span><br><span class="line">  赋值：</span><br><span class="line">    数组名[下标]&#x3D;值；</span><br><span class="line">     newArr[2]&#x3D;&quot;韩梅梅&quot;;</span><br><span class="line">2.获取数组的长度</span><br><span class="line">  数组长度：数组中元素的个数</span><br><span class="line">  属性：length</span><br><span class="line">  语法：数组名.length</span><br><span class="line">3.配合循环，遍历数组中的每个元素</span><br><span class="line">  for(var i&#x3D;0;i&lt;names.length;i++)&#123;</span><br><span class="line">      i:表示数组中每个元素的下标</span><br><span class="line">      names[i]:每个元素</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  length表示数组中即将要插入的元素的下标</span><br><span class="line">  var names&#x3D;[&quot;tom&quot;,&quot;lili&quot;,&quot;lucy&quot;];</span><br><span class="line">      names[names.length]&#x3D;&quot;lilei&quot;;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="16-关联数组"><a href="#16-关联数组" class="headerlink" title="16.关联数组"></a>16.关联数组</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">1.关联数组</span><br><span class="line">  以字符串作为元素的下标的数组，就是关联数组。</span><br><span class="line">  以数字作为下标的数组，就是索引数组。</span><br><span class="line">$array&#x3D;[&quot;name&quot;&#x3D;&gt;&quot;tom&quot;]</span><br><span class="line">2.js中的关联数组</span><br><span class="line">  var array&#x3D;[];</span><br><span class="line">  array[&quot;字符串下标&quot;]&#x3D;值;</span><br><span class="line">  注意：</span><br><span class="line">    1.关联数组中，字符串下标的内容是不记录到length中的</span><br><span class="line">2.只能通过 字符串 做下标取值</span><br><span class="line">3.for...in</span><br><span class="line">  遍历出任意数组中的字符串下标 以及 索引下标</span><br><span class="line">  语法：for(var 变量 in 数组名)&#123;</span><br><span class="line">       &#x2F;&#x2F;变量：字符串下标 或 索引下标</span><br><span class="line">  &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="17-冒泡排序"><a href="#17-冒泡排序" class="headerlink" title="17.冒泡排序"></a>17.冒泡排序</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">1.什么是冒泡</span><br><span class="line">  排序算法之一，将一组数据进行排序，小的数字往前排，大的数字往后排。</span><br><span class="line">  两两比较，小的靠前。</span><br><span class="line">  var arr&#x3D;[9,23,6,78,45]; 5个数  比4轮</span><br><span class="line">  第一轮：比较了4次</span><br><span class="line">  第二轮：比较了3次</span><br><span class="line">  第三轮：比较了2次</span><br><span class="line">  第四轮：比较了1次</span><br><span class="line">  1.n个数字，则比较n-1轮</span><br><span class="line">    for(var i&#x3D;1;i&lt;arr.length;i++)</span><br><span class="line">  2.轮数增加，比较的次数较少</span><br><span class="line">    for(var j&#x3D;0;j&lt;arr.length-i;j++)</span><br><span class="line">          第一轮  5     -1&#x3D;4次</span><br><span class="line">      第二轮  5     -2&#x3D;3次</span><br><span class="line">              第三轮  5     -3&#x3D;2次</span><br><span class="line">      第四轮  5     -4&#x3D;1次</span><br><span class="line">      两两比较 小的靠前</span><br><span class="line">      if(arr[j]&gt;arr[j+1])</span><br><span class="line"></span><br><span class="line">         arr[j]^&#x3D;arr[j+1];</span><br><span class="line">         arr[j+1]^&#x3D;arr[j];</span><br><span class="line">         arr[j]^&#x3D;arr[j+1]</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="18-数组的常用方法"><a href="#18-数组的常用方法" class="headerlink" title="18.数组的常用方法"></a>18.数组的常用方法</h3><p>1.toString();</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">作用：将数组转换为字符串，并返回转换后的结果。</span><br><span class="line">语法： var str&#x3D;数组对象.toString();</span><br></pre></td></tr></table></figure>

<p>2.join()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">作用：将数组的元素通过指定的字符连接到一起，并返回连接后字符串</span><br><span class="line">语法：var str&#x3D;数组对象.join(&quot;字符&quot;);</span><br></pre></td></tr></table></figure>

<p>3.concat()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">作用：拼接两个或更多的数组，并返回拼接后的结果</span><br><span class="line">语法：var res&#x3D;数组对象.concat(数组1,数组2,...);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="19-数组的函数"><a href="#19-数组的函数" class="headerlink" title="19.数组的函数"></a>19.数组的函数</h3><p>1.slice()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">作用：截取子数组，从指定的数组中，截取几个连续的元素组成一个新的数组</span><br><span class="line">语法：var arr&#x3D;数组名.slice(start,[end]);</span><br><span class="line">      start:从哪个下标位置处开始截取，取值为正，从前向后算； </span><br><span class="line">      取值为负，从后向前算          0      1      2</span><br><span class="line">   var arr&#x3D;[&quot;中国&quot;,&quot;美国&quot;,&quot;俄罗斯&quot;];</span><br><span class="line">             -3      -2    -1 </span><br><span class="line">      end:指定结束位置处的下标（不包含自己），该参数可以省略，</span><br><span class="line">      如果省略的话，就是从strat开始一直截取到尾。</span><br></pre></td></tr></table></figure>

<p>2.splice()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">作用：允许从指定数组中，删除一部分元素，同时再添加一部分元素</span><br><span class="line">语法：arr.splice(start,count,e1,e2...);</span><br><span class="line">      start:指定添加或删除元素的起始下标</span><br><span class="line">  count:指定要删除元素的个数，取值为0表示不删除</span><br><span class="line">  e1:要增加的新元素，可以多个</span><br><span class="line">  返回值：返回一个由删除元素所组成的数组</span><br></pre></td></tr></table></figure>

<p>3.reverse()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">作用：将一个数组反转</span><br><span class="line">语法：数组名.reverse();</span><br><span class="line">注意：该函数会改变当前数组的内容</span><br></pre></td></tr></table></figure>

<p>4.sort()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">作用：排序，默认情况下按照数组元素们的Unicode码进行升序排序。</span><br><span class="line">语法：数组名.sort();</span><br><span class="line">特殊：</span><br><span class="line">   允许自定义排序函数，从而实现对数字的升序或降序的排序</span><br><span class="line">   ex:</span><br><span class="line">     var arr&#x3D;[12,6,4,115,78];</span><br><span class="line"> &#x2F;&#x2F;排序函数（升序）</span><br><span class="line"> function sortAsc(a,b)&#123;</span><br><span class="line">    return a-b;</span><br><span class="line"> &#125;</span><br><span class="line"> arr.sort(sortAsc);</span><br><span class="line">  原理：</span><br><span class="line">    1.指定排序行数sortAsc，定义两个参数a和b，表示数组中相邻的两个数字</span><br><span class="line">2.将排序函数指定给数组sort()函数，数组会自动传递数据到sortAsc()中，</span><br><span class="line">  如果sortAsc()的返回值&gt;0，则交互两个数字的位置，否则不变。</span><br><span class="line">  使用函数完成升序排序：</span><br><span class="line">     arr.sort(</span><br><span class="line">       function(a,b)&#123;  &#x2F;&#x2F;匿名函数</span><br><span class="line">         return a-b;</span><br><span class="line">       &#125;</span><br><span class="line">    )</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="20-进出栈操作"><a href="#20-进出栈操作" class="headerlink" title="20.进出栈操作"></a>20.进出栈操作</h3><p>JS是按照标准的“栈式操作”来访问数组<br>所有的“栈式操作”的特点就是“后进先出”<br>1.push()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">入栈，在栈顶添加指定的元素，并返回新数组的长度</span><br><span class="line"> var arr&#x3D;[10,20,30];</span><br><span class="line"> &#x2F;&#x2F;向栈顶增加新的数据40</span><br><span class="line"> var len&#x3D;arr.push(40); &#x2F;&#x2F;4</span><br></pre></td></tr></table></figure>

<p>2.pop()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">出栈，删除(删除栈顶数据)并返回删除元素</span><br><span class="line">注意：改变原来数组</span><br></pre></td></tr></table></figure>

<p>3.shift()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">删除数组头部（第一个）的元素并返回删除元素</span><br><span class="line">语法：数组名.shift();</span><br></pre></td></tr></table></figure>

<p>4.unshift()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">在数组的头部（第一个）元素的位置处，增加元素,返回的是数组的长度。</span><br><span class="line">语法：数组名.unshift(增加的数据);</span><br></pre></td></tr></table></figure>

<p>3.二维数组<br>1.什么是二维数组</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">在一个数组中的元素又是一个数组，也可以称为：数组的数组。</span><br></pre></td></tr></table></figure>

<p>2.二维数组的使用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var names&#x3D;[</span><br><span class="line">    [&quot;孙悟空&quot;,&quot;猪八戒&quot;,&quot;沙和尚&quot;],</span><br><span class="line">[&quot;大乔&quot;,&quot;小乔&quot;,&quot;曹操&quot;],</span><br><span class="line">[&quot;林黛玉&quot;,&quot;贾宝玉&quot;,&quot;薛宝钗&quot;]</span><br><span class="line">];</span><br><span class="line"> &#x2F;&#x2F;打印输出“小乔”</span><br><span class="line">   console.log(names[1][1]);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

    </div>

    
    
    
        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>ZJW
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="https://zjingw.github.io/2020/09/26/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-JS%E5%9F%BA%E7%A1%80/" title="前端知识点总结-JS基础">https://zjingw.github.io/2020/09/26/前端知识点总结-JS基础/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/09/26/%E5%85%A5%E5%9D%91%E5%B0%8F%E7%A8%8B%E5%BA%8F/" rel="prev" title="入坑小程序">
      <i class="fa fa-chevron-left"></i> 入坑小程序
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/09/26/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-BOM/" rel="next" title="前端知识点总结-BOM">
      前端知识点总结-BOM <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>


        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">
           <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
src="//music.163.com/outchain/player?type=2&id=1383927243&auto=1&height=66"></iframe>

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93%E2%80%94%E2%80%94JS%E5%9F%BA%E7%A1%80"><span class="nav-text">前端知识点总结——JS基础</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-javascript%E6%A6%82%E8%BF%B0-%E4%BA%86%E8%A7%A3"><span class="nav-text">1.javascript概述(了解)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-JavaScript%E7%9A%84%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95"><span class="nav-text">2.JavaScript的基础语法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E5%8F%98%E9%87%8F%E5%92%8C%E5%B8%B8%E9%87%8F"><span class="nav-text">3.变量和常量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-%E5%8F%98%E9%87%8F%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="nav-text">4.变量的使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-%E5%B8%B8%E9%87%8F"><span class="nav-text">5.常量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-1%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="nav-text">5.1数据类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-2%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E8%BD%AC%E6%8D%A2"><span class="nav-text">5.2数据类型的转换</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-%E8%BF%90%E8%A1%8C%E7%AC%A6%E5%92%8C%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="nav-text">6.运行符和表达式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-%E5%87%BD%E6%95%B0-function"><span class="nav-text">7.函数-function</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#8-%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="nav-text">8.作用域</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#9-%E6%8C%89%E5%80%BC%E4%BC%A0%E9%80%92"><span class="nav-text">9.按值传递</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#10-ECMAScript%E6%8F%90%E4%BE%9B%E4%B8%80%E7%BB%84%E5%85%A8%E5%B1%80%E5%87%BD%E6%95%B0"><span class="nav-text">10.ECMAScript提供一组全局函数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#11-%E9%80%92%E5%BD%92%E8%B0%83%E7%94%A8"><span class="nav-text">11.递归调用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#12-%E5%88%86%E6%94%AF%E7%BB%93%E6%9E%84"><span class="nav-text">12.分支结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#12-%E5%BE%AA%E7%8E%AF%E7%BB%93%E6%9E%84"><span class="nav-text">12.循环结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#13-for%E7%9A%84%E7%89%B9%E6%AE%8A%E7%94%A8%E6%B3%95"><span class="nav-text">13.for的特殊用法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#14-%E5%BE%AA%E7%8E%AF%E5%B5%8C%E5%A5%97"><span class="nav-text">14.循环嵌套</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#15-%E6%95%B0%E7%BB%84"><span class="nav-text">15.数组</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#16-%E5%85%B3%E8%81%94%E6%95%B0%E7%BB%84"><span class="nav-text">16.关联数组</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#17-%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F"><span class="nav-text">17.冒泡排序</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#18-%E6%95%B0%E7%BB%84%E7%9A%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="nav-text">18.数组的常用方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#19-%E6%95%B0%E7%BB%84%E7%9A%84%E5%87%BD%E6%95%B0"><span class="nav-text">19.数组的函数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#20-%E8%BF%9B%E5%87%BA%E6%A0%88%E6%93%8D%E4%BD%9C"><span class="nav-text">20.进出栈操作</span></a></li></ol></li></ol></div>

  
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="ZJW"
      src="/images/1.jpeg">
  <p class="site-author-name" itemprop="name">ZJW</p>
  <div class="site-description" itemprop="description">Ctrl C/Ctrl V拯救世界</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">7</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">6</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yourname" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:yourname@gmail.com" title="E-Mail → mailto:yourname@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://weibo.com/yourname" title="Weibo → https:&#x2F;&#x2F;weibo.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fab fa-weibo fa-fw"></i>Weibo</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://plus.google.com/yourname" title="Google → https:&#x2F;&#x2F;plus.google.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fab fa-google fa-fw"></i>Google</a>
      </span>
  </div>
  <div class="cc-license motion-element" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>


<div style="">
  <canvas id="canvas" style="width:60%;">当前浏览器不支持canvas，请更换浏览器后再试</canvas>
</div>
<script>
(function(){

   var digit=
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0]
        ]//:
    ];

var canvas = document.getElementById('canvas');

if(canvas.getContext){
    var cxt = canvas.getContext('2d');
    //声明canvas的宽高
    var H = 100,W = 700;
    canvas.height = H;
    canvas.width = W;
    cxt.fillStyle = '#f00';
    cxt.fillRect(10,10,50,50);

    //存储时间数据
    var data = [];
    //存储运动的小球
    var balls = [];
    //设置粒子半径
    var R = canvas.height/20-1;
    (function(){
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
        data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
    })();

    /*生成点阵数字*/
    function renderDigit(index,num){
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    cxt.beginPath();
                    cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                    cxt.closePath();
                    cxt.fill();
                }
            }
        }
    }

    /*更新时钟*/
    function updateDigitTime(){
        var changeNumArray = [];
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        var NewData = [];
        NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
        for(var i = data.length-1; i >=0 ; i--){
            //时间发生变化
            if(NewData[i] !== data[i]){
                //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
                changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
            }
        }
        //增加小球
        for(var i = 0; i< changeNumArray.length; i++){
            addBalls.apply(this,changeNumArray[i].split('_'));
        }
        data = NewData.concat();
    }

    /*更新小球状态*/
    function updateBalls(){
        for(var i = 0; i < balls.length; i++){
            balls[i].stepY += balls[i].disY;
            balls[i].x += balls[i].stepX;
            balls[i].y += balls[i].stepY;
            if(balls[i].x > W + R || balls[i].y > H + R){
                balls.splice(i,1);
                i--;
            }
        }
    }

    /*增加要运动的小球*/
    function addBalls(index,num){
        var numArray = [1,2,3];
        var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    var ball = {
                        x:14*(R+2)*index + j*2*(R+1)+(R+1),
                        y:i*2*(R+1)+(R+1),
                        stepX:Math.floor(Math.random() * 4 -2),
                        stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
                        color:colorArray[Math.floor(Math.random()*colorArray.length)],
                        disY:1
                    };
                    balls.push(ball);
                }
            }
        }
    }

    /*渲染*/
    function render(){
        //重置画布宽度，达到清空画布的效果
        canvas.height = 100;
        //渲染时钟
        for(var i = 0; i < data.length; i++){
            renderDigit(i,data[i]);
        }
        //渲染小球
        for(var i = 0; i < balls.length; i++){
            cxt.beginPath();
            cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
            cxt.fillStyle = balls[i].color;
            cxt.closePath();
            cxt.fill();
        }
    }

    clearInterval(oTimer);
    var oTimer = setInterval(function(){
        //更新时钟
        updateDigitTime();
        //更新小球状态
        updateBalls();
        //渲染
        render();
    },50);
}

})();
</script>
      </div>
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">ZJW</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
      <span class="post-meta-item-text">站点总字数：</span>
    <span title="站点总字数">37k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span class="post-meta-item-text">站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">33 分钟</span>
</div><span id="sitetime"></span>
<script language=javascript>
    function siteTime(){
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth()+1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份，为4位年份值
        month - 0-11之间的整数，做为date对象的月份
        day - 1-31之间的整数，做为date对象的天数
        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
        minutes - 0-59之间的整数，做为date对象的分钟数
        seconds - 0-59之间的整数，做为date对象的秒数
        microseconds - 0-999之间的整数，做为date对象的毫秒数 */
        var t1 = Date.UTC(2020,05,14,18,07,00); //北京时间2020-05-14 18:07
        var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
        var diff = t2-t1;
        var diffYears = Math.floor(diff/years);
        var diffDays = Math.floor((diff/days)-diffYears*365);
        var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
        var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
        var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
        document.getElementById("sitetime").innerHTML="本站已苟且生存了 "+/*diffYears+" 年 "+*/diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
    }/*因为建站时间还没有一年，就将之注释掉了。需要的可以取消*/
    siteTime();
</script>



<div class="translate-style">
繁/简：<a id="translateLink" href="javascript:translatePage();">繁体
</a>
</div>
<script type="text/javascript" src="/js/tw_cn.js"></script>
<script type="text/javascript">
var defaultEncoding = 2; //网站编写字体是否繁体，1-繁体，2-简体
var translateDelay = 0; //延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
var cookieDomain = "https://dongguagua.gitee.io"; //Cookie地址, 一定要设定, 通常为你的网址
var msgToTraditionalChinese = "繁体"; //此处可以更改为你想要显示的文字
var msgToSimplifiedChinese = "简体"; //同上，但两处均不建议更改
var translateButtonId = "translateLink"; //默认互换id
translateInitilization();
</script>

 <div class="powered-by">
  <i class="fa fa-user-md"></i>
  <span id="busuanzi_container_site_uv">
    本站总访客数:<span id="busuanzi_value_site_uv"></span>&nbsp;&nbsp;| 
  </span>
  <span id="busuanzi_container_site_pv">
      &nbsp;本站总访问量<span id="busuanzi_value_site_pv"></span>次
  </span>
  </div>
  </div>
        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>


  <script defer src="/lib/three/three.min.js"></script>
    <script defer src="/lib/three/canvas_lines.min.js"></script>


  















  

  


  <script async src="/js/cursor/fireworks.js"></script>

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/miku.model.json"},"display":{"position":"right","width":150,"height":350},"mobile":{"show":true},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
